<template>
	<view class="registerbox">
		<view class="registeritem">
			<view class="item">
				<uni-icons type="person-filled" size="20" color="#6d85f9"></uni-icons>
				<input placeholderStyle="color: #999" placeholder="请输入姓名" border="surround" v-model="user.nickname" @blur="nameChange" />
			</view>
			<view class="" style="font-size: 24rpx;text-align: right;margin-bottom: 25rpx;color: #bebebe;">
				姓名应为<text style="color: #4acbef;">汉字</text>且不超过<text style="color: #4acbef;">5</text>个字
			</view>
			<view class="item">
				<uni-icons type="phone" size="20" color="#6d85f9"></uni-icons>
				<input placeholderStyle="color: #999" placeholder="请输入手机号" border="surround" v-model="user.mobile" @blur="mobileChange"/>
			</view>
			<view class="" style="font-size: 24rpx;text-align: right;margin-bottom: 25rpx;color: #bebebe;">
				请输入正确的手机号格式
			</view>
			<view class="item">
				<uni-icons type="locked" size="20" color="#6d85f9"></uni-icons>
				<input class="uni-input" password type="text" placeholderStyle="color: #999" placeholder="请输入密码" border="surround" v-model="user.password" />
								 
			</view>
			<view class="" style="font-size: 24rpx;text-align: right;margin-bottom: 25rpx;color: #bebebe;">
				密码必须为包含 <text style="color: #4acbef;">大小写字母</text> 和<text style="color: #4acbef;">数字</text>的组合
			</view>
			<view class="item">
				<uni-icons type="locked-filled" size="20" color="#6d85f9"></uni-icons>
				<input class="uni-input" password type="text" placeholderStyle="color: #999" placeholder="请确认密码" border="surround" v-model="user.passwordTS" @blur="passwordCheck"/>
			</view>
			<view class="signBox">
				<SignView ref="signCanvasRef" @success="registerIdentifyer" />
			</view>
			<view style="padding: 40rpx;margin-top: 60rpx;">
				<button @click="saveSign" class='bg-login-zl' style="border-radius: 40rpx;">注 册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { registerUser } from '@/api/busin/project/user/index.js'
	import SignView from "@/pages/busin/components/signView.vue"
	
	export default {
		components: {
			'SignView': SignView
		},
		data() {
			return {
				user: {
					nickname: "",
					mobile: "",
					password: "",
					passwordTS: "",
					signImg: undefined
				},
				showPassword: true
			}
		},
		methods: {
			saveSign() {
				if(!this.user.nickname){
					uni.showToast({ title: '请输入姓名', icon: 'none' });
					return;
				}
				if(!this.user.mobile){
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if(!this.user.password || !this.user.passwordTS){
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}
				uni.showLoading({
					title: '注册中，请稍等...'
				})
				this.$refs.signCanvasRef.save()
			},
			async registerIdentifyer(imgUrl) {
				this.user.signImg = imgUrl
				registerUser(this.user).then((res) => {
					uni.hideLoading()
					this.$modal.msgSuccess("注册成功")
					uni.reLaunch({
						url: '/pages/login'
					})
				}).catch((error) => {
					uni.hideLoading()
				}) 
			},
			nameChange() {
				if(!/^[\u4e00-\u9fa5]+[a-zA-Z0-9]{0,5}$/.test(this.user.nickname)){
					uni.showToast({ title: '只能输入汉字，数字', icon: 'none' });
					return;
				}
			},
			mobileChange() {
				if(!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.user.mobile)){
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					return;
				}
			},
			passwordChange() {
				if(!/^([a-zA-Z]+[0-9]+){6,10}$/.test(this.user.password)){
					uni.showToast({ title: '密码由 数字、字母 组成', icon: 'none' });
					return;
				}
			},
			passwordCheck() {
				if(!this.user.password){
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}
				if(this.user.password !== this.user.passwordTS){
					uni.showToast({ title: '密码不一致', icon: 'none' });
					return;
				}
			}
		}
	}
</script>

<style scoped>
	.registerbox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 0 40rpx;
		background-image: linear-gradient(-135deg, #d7f7f6, #e3e5fc);
	}

	.registeritem {
		margin-top: -80rpx;
		width: 100%;
		background-color: #fff;
		/* box-shadow: 0 0 10rpx 10rpx #bcdddd; */
		border-radius: 20rpx;
		padding: 40rpx;
	}

	.register {
		font-size: 40rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 80rpx;
	}

	.item {
		background-color: #f1f1f1;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		height: 80rpx;
	}

	.item2 {
		background-color: #f1f1f1;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.bg-login-zl {
		width: 100%;
		font-size: 30rpx;
		background-image: linear-gradient(45deg, #727CFB, #46D0ED);
		color: #ffffff;
	}
	
	.signBox {
	    position: relative;
	    overflow: hidden;
	    background-color: #fff;
	    height: 35vh;
	}

</style>